<template>
	<div class="AppBox">
		<div v-for="stint of B.arrStint" :key="`stint:${stint.id}-${stint.id}`" class="StintBox">
			<div class="line title">{{stint.title}}</div>

			<div v-for="(item, indexItem) in stint.arrItem" :key="`stint:${stint.id}-item-${indexItem}`" class="item">
				<div class="inline line title _item">● {{item.title}}</div>
				<Texter v-show="item.isShowParams" v-model="item.interval" class="inline line param" label="间隔" width="140" label-width="80" border="bLine" text-align="center" hider="oper" />
				<template v-for="(param, key) in item.params">
					<Texter v-show="item.isShowParams" :key="`stint:${stint.id}-param-${key}`" v-model="item.params[key]" class="inline line param" :label="item.paramTexts[key] || stint	.paramTexts[key]|| B.D.paramTexts[key] || key" width="140" label-width="80" border="bLine" text-align="center" hider="oper" />
				</template>
				<div class="inline line menu"
					:class="item.isShowParams ? '_open' : ''"
					@click="item.isShowParams = !item.isShowParams"
				>
					{{item.isShowParams ? '◀' : '▶'}}
				</div>
				<br />
				<div class="inline line elli desc">{{item.text.desc}}</div>
				<div class="inline line button" @click.exact="atTick(stint.id, item, indexItem)" @click.alt="atTick(stint.id, item, indexItem, false)">校对</div>
				<div class="inline line remainText" :title="item.timeNext ? item.timeNext.format() : ''">距离下次更新：</div>
				<div class="inline line remain" :title="item.timeNext ? item.timeNext.format() : ''">{{item.text.remain}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() { return {}; },

		async mounted() {
			this.initStint();
		},

		methods: {
			async initStint(D) {
				try {
					if(!D) { D = await A.conn('data'); }

					this.$set(B, 'D', D);
					this.$set(B, 'arrStint', D.arrStint);
				}
				catch(error) {
					alert('加载目录数据失败，请重试');
				}

				B.Timing.init();
				B.Timing.go();
			},

			async atTick(idSstint, item, indexItem, isNewBase = true) {
				const tnow = M().format();

				this.initStint(
					await A.post('align', {
						idSstint,
						arrItem: [{
							index:indexItem,

							timeBase: isNewBase ? tnow : item.timeBase,
							interval: item.interval,

							params: item.params,
						}]
					})
				);
			},
		},
	};
</script>

<style lang="sass" scoped>
$colorTop: #243341

.AppBox
	font-size: 0px
	white-space: nowrap
	overflow-y: auto

.StintBox
	padding: 10px

	.line
		height: fs(8)
		line-height: fs(8)

	.button
		@include nosel
			box-sizing: border-box
			padding: 0 5px
			margin-left: 5px
			width: 50px
			border: 2px solid #1faaf1
			border-radius: 4px
			font-size: fs()
			font-weight: bold
			text-align: center
			line-height: 28px
			cursor: pointer

		&:hover
			background: #1faaf1

	.title
		font-size: fs(1)
		font-weight: bold

		&._item
			font-size: fs()

	>.item
		margin-bottom: 10px

		>.menu
			@include nosel
				box-sizing: border-box
				padding: 0 2px
				margin-left: 5px
				border-radius: 2px 4px 4px 2px
				font-size: fs()
				cursor: pointer

			&._open
				border-radius: 4px 2px 2px 4px

			&:hover
				background: #1faaf1

		>.param
			margin-left: 5px
			font-size: 14px

			/deep/ .label
			line-height: 28px

		>.desc
			position: relative
			width: calc(100% - 250px)
			font-size: fs()

		>.remainText
			position: relative
			width: 115px
			font-size: fs()
			text-align: center

		>.remain
			position: relative
			width: 85px
			color: #1faaf1
			font-size: fs()
			font-weight: bold
			text-align: center
</style>